<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模拟用户登录系统</title>
		<link rel="stylesheet" href="css/bootstrap.min.css"/>
		<!-- 引入第三方样式之外,还可以自己定义样式, 覆盖样式表样式 -->
		<style>
			/*限制网页宽度,不能直接设置body,设置container*/
			.container{
				width: 300px;
			}
		</style>

	</head>
	<body>
		<div class="container">
			<h3>用户登录</h3>
			
			<!-- 展示区域:登陆成功信息 先默认隐藏起来-->
			<div style="display: none;" id="msg" >123</div>
			
			<div class="form-group">
				<label>用户名:</label>
				<input type="text" class="form-control" autocomplete="off" placeholder="请输入用户名..." name="username" id="username" />
			</div>
			<div class="form-group">
				<label>密码:</label>
				<input type="password" class="form-control" placeholder="请输入密码..." name="password" id="password" />
			</div>
			<div>
				<!-- 给按钮绑定onclick单击事件,写函数名() -->
				<button id="btnSubmit" class="btn btn-success" onclick="doSubmit()">登录</button>
				<button id="btnClear" class="btn btn-danger" onclick="doClear()">清空</button>
			</div>
		</div>
	</body>	
		
	<script>
		//定义提交函数
		function doSubmit(){
			//获取用户名框内的内容
			var username = document.getElementById("username");
			// console.log(username);
			console.log(username.value);//input框获取属性值方式.value
			
			//获取密码
			var password = document.getElementById("password");
			console.log(password.value);
			
			//获取msg框,设置新值,把它展示出来,设置新颜色
			var msg = document.getElementById("msg");
			//div与input获取值得语法不同
			msg.innerText = username.value + "登陆成功";//div获取属性值方式.innerText
			//动态改变框样式-设置style属性,展示msg(重设样式会覆盖之前的样式) margin-外边距 padding-内边距
			msg.style = "display:block; color:white; background-color: #008000; margin: 10px; padding: 10px;";
		}
		
		//清空输入框
		function doClear(){
			document.getElementById("username").value = '';//赋空字符串清空值
			document.getElementById("password").value = "";//单引号和双引号功能相同
		}
	</script>
</html>
